<html>
<head>
<style>
@page {
  size: 180px 100px;
  margin: 18px;
  -fs-max-overflow-pages: 10;
  -fs-overflow-pages-direction: ltr;
  
  @top-left {
    content: "Page " counter(page) -fs-if-cut-off(" (continued)") " of " counter(pages);
    font-family: 'TestFont';
    font-size: 12px;
  }
}
body {
  margin: 0;
}
div {
  box-sizing: border-box;
  margin: 0;
}
.outer {
  border: 1px solid black;
  background-color: red;
  min-height: 20px;
}
.inner {
  border: 1px solid blue;
  background-color: orange;
  min-height: 15px;
}
</style>
</head>
<body style="font-family: 'TestFont'; color: black; font-size: 12px;">
PAGE 1.

<div style="page-break-before: always;"></div>

PAGE 2 (with overflow).
<div class="outer" style="width: 150%;">
  <div class="inner" style="width: 100%;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>

<div style="page-break-before: always;"></div>

PAGE 3.
</body>
</html>
